<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IFE2016_task6</title>
    <link rel="stylesheet" href="task6.css" />
</head>
<body>
<div class="container">
    <div class="top">
        <div class="top_box">
            <span>ife.baidu.com</span>
        </div>
        <span class="top_time">2017.3</span>
    </div>
    <div class="mid">
        <div class="mid_left">
            <img alt="pic1" src="src/pic1.png"/>
            <div class="cover_left"></div>
            <div class="cover_right"></div>
        </div>
        <div class="mid_right">
            <hr/>
            <p class="about">About</p>
            <p class="about">Technologe</p>
            <p class="detail">About technologe about technologe about technologe</p>
            <p class="seven">700</p>
            <p class="num">3.2</p>
            <p class="text_1">css</p>
            <p class="text_2">csscsscsscsscss</p>
        </div>
    </div>
    <div class="mid_text">
        <div class="what">
            <div class="mid_text_title">What</div>
            <p>
                前端前端前端前端前端前端前端前端前端前
                端前端前端前端前端前端前端前端前端前端
                前端前端前端前端前端前端前端前端前端前
                端前端前端前端前端前端前端前端前端前端
                前端前端前端前端前端前端前端前端前端前
                端前端前端前端前端前端前端前端前端前端
                前端前端前端前端前端前端前端前端前端前
            </p>
        </div>
        <div class="when">
            <div class="mid_text_title">When</div>
            <p>
                前端前端前端前端前端前端前
                端前端前端前端前端前端前端
                前端前端前端前端前端前端前
                端前端前端前端前端前端前端
                前端前端前端前端前端前端前
                端前端前端前端前端前端前端
                前端前端前端前端前端前端前
                端前端前端前端前端前端前端
                前端前端前端前端前端前端前
                端前端前端前端前端前端前端
                前端前端前端前端前端
            </p>
        </div>
        <div class="how">
            <div class="mid_text_title">How</div>
            <p>
                前端前端前端前端前端前
                端前端前端前端前端前端
                前端前端前端前端前端前
                端前端前
            </p>
            <dl>
                <dd>What--------<span>40%</span></dd>
                <dd>What--------<span>30%</span></dd>
                <dd>What--------<span>30%</span></dd>
            </dl>
        </div>
    </div>
    <div class="bottom">
        <div class="bottom_left">
            <div class="bottom_left_top">
                <p><span class="the">THE</span> TECHNOLOGE<br/>OF FRONT</p>
                <p><span class="fe">前端技术领域</span></p>
            </div>
            <div class="bottom_left_bottom">
                <p class="blb_text">前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前前</p>
                <img alt="pic3" src="src/pic3.png" />
                <p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</p>
                <p>端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
            </div>
        </div>
        <div class="bottom_right">
            <div class="bottom_right_top">
                <div class="brt_img">
                    <img alt="pic2" src="src/pic2.png" />
                </div>
                <div class="brt_cover">
                    <p>前端技术<span>前端技术前端技术</span></p>
                </div>
            </div>
            <div class="bottom_right_bottom">
                <div class="brb_ul">
                    <ul>
                        <li>
                            前端前端前端前端前端前端 ....................
                            <span class="sp">前端</span>
                        </li>
                        <li>
                            前端前端前端前端 ...........................
                            <span class="sp">端前端</span>
                        </li>
                        <li>
                            前端前端前端前端前端前端前端 ................
                            <span class="sp">前端</span>
                        </li>
                    </ul>
                </div>
                <div class="brb_text1">
                    <p class="zero">0</p>
                    <p class="numbers">ONE TWO<br/>THREE FOUR FIVE</p>
                    <p class="helloworld">helloworld helloworld <br/>helloworld</p>
                </div>
                <div class="brb_text2">
                    <p>
                        <span class="qu_left">"</span>
                        helloworld helloworld helloworld helloworld helloworld helloworld helloworld helloworld
                        <span class="qu_right">"</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <p>IzayoiH 2017.3.17(做这玩意儿太累了...不归路啊)</p>
    </footer>
</div>
</body>
</html>